<template>
    <div>
        <Row :gutter="100">
            <Col span="8">
                <span class="jg-name">法定代表人</span>
                <Input v-model="obj.representative" :placeholder="$route.params.type != 'detail' ? '请输入法定代表人' : ''" :disabled="$route.params.type == 'detail' ? true : false"/>
            </Col>
            <Col span="8">
                <span class="jg-name">身份证号</span>
                <Input v-model="obj.cardId" :placeholder="$route.params.type != 'detail' ? '请输入身份证号' : ''" :disabled="$route.params.type == 'detail' ? true : false"/>
            </Col>
            <Col span="8"></Col>
        </Row>
        <Row :gutter="100">
            <Col span="8">
                <span class="jg-name">联系方式</span>
                <Input v-model="obj.telephone" :placeholder="$route.params.type != 'detail' ? '请输入联系方式' : ''"  :disabled="$route.params.type == 'detail' ? true : false"/>
            </Col>
            <Col span="8">
                <span class="jg-name">工商类型</span>
                <Select v-model="obj.dictBusinessType" :placeholder="$route.params.type != 'detail' ? '请选择工商类型' : ''" :disabled="$route.params.type == 'detail' ? true : false">
                    <Option v-for="(item,index) in gsList" :key="index" :value="item.code">{{ item.name }}</Option>
                </Select>
            </Col>
            <Col span="8"></Col>
        </Row>
        <Row :gutter="100">
            <Col span="8">
                <span class="jg-name">注册地址</span>
                <Input v-model="obj.registerAddress" :placeholder="$route.params.type != 'detail' ? '请输入注册地址' : ''" :disabled="$route.params.type == 'detail' ? true : false"/>
            </Col>
            <Col span="8">
                <span class="jg-name">经营期限</span>
                <DatePicker v-model="obj.deadLine" :transfer="transfer" @on-change="getDeadLine" type="date" placeholder="请选择经营期限" :disabled="$route.params.type=='detail' ? true : false"></DatePicker>
            </Col>
            <Col span="8"></Col>
        </Row>
        <Row :gutter="100">
            <Col span="8">
                <span class="jg-name">注册资本</span>
                <Input v-model="obj.registerCapital" :placeholder="$route.params.type != 'detail' ? '请输入注册资本' : ''" :disabled="$route.params.type == 'detail' ? true : false"/>
            </Col>
            <Col span="8"></Col>
            <Col span="8"></Col>
        </Row>
        <Row :gutter="100">
            <Col span="16">
                <span class="jg-name">经营范围</span>
                <Input v-model="obj.scope" :placeholder="$route.params.type != 'detail' ? '请输入经营范围' : ''" :rows="4" type="textarea"  :disabled="$route.params.type == 'detail' ? true : false"/>
            </Col>
            <Col span="8"></Col>
        </Row>
        <Row :gutter="30" v-if="noPic">
            <Col span="6" v-if="noFrontPic">
                <span class="jg-name">法人身份证照片</span>
                <div class="demo-upload-list" v-if="JSON.stringify(zmImgObj) != '{}'">
                    <template>
                        <img :src="fileUploadUrl +'/file/downFile/'+zmImgObj.fileIds">
                        <div class="demo-upload-list-cover">
                            <Icon type="ios-eye-outline" @click.native="visible = !visible,bigPic = `${fileUploadUrl}/file/downFile/${zmImgObj.fileIds}`"></Icon>
                            <Icon type="ios-trash-outline"  v-if="$route.params.type != 'detail'" @click="remove('frontPic')"></Icon>
                        </div>
                    </template>   
                </div>
                <Upload v-if="JSON.stringify(zmImgObj) == '{}'"
                    ref="upload"
                    :show-upload-list="false"
                    :on-success="handleSuccessZm"
                    :format="['jpg','jpeg','png','BMP','TIF','GIF','PJPEG','JFIF','PJP']"
                    :max-size="5120"
                    :on-format-error="handleFormatError"
                    :on-exceeded-size="handleMaxSize"
                    :disabled="$route.params.type == 'detail' ? true : false"
                    multiple
                    type="drag"
                    :action="uploadAction">
                    <div style="padding: 20px 0" v-if="$route.params.type != 'detail'">
                        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                        <p>身份证正面</p>
                    </div>
                    <!-- 详情没图的情况 -->
                    <div class="noPicture" v-if="$route.params.type === 'detail'">
                        <p>暂无图片</p>
                    </div>
                </Upload>
            </Col>
            <Col span="6" v-if="noBackPic">
                <span class="jg-name"></span>
                <div class="demo-upload-list" v-if="JSON.stringify(fmImgObj) != '{}'">
                    <template>
                        <img :src="fileUploadUrl +'/file/downFile/'+fmImgObj.fileIds">
                        <div class="demo-upload-list-cover">
                            <Icon type="ios-eye-outline" @click.native="visible = !visible,bigPic = `${fileUploadUrl}/file/downFile/${fmImgObj.fileIds}`"></Icon>
                            <Icon type="ios-trash-outline"  v-if="$route.params.type != 'detail'" @click="remove('backPic')"></Icon>
                        </div>
                    </template> 
                </div>
                <Upload v-if="JSON.stringify(fmImgObj) == '{}'"
                    ref="upload"
                    :show-upload-list="false"
                    :on-success="handleSuccessFm"
                    :format="['jpg','jpeg','png','BMP','TIF','GIF','PJPEG','JFIF','PJP']"
                    :max-size="5120"
                    :on-format-error="handleFormatError"
                    :on-exceeded-size="handleMaxSize"
                    :disabled="$route.params.type == 'detail' ? true : false"
                    multiple
                    type="drag"
                    :action="uploadAction">
                    <div style="padding: 20px 0"  v-if="$route.params.type != 'detail'">
                        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                        <p>身份证反面</p>
                    </div>
                    <!-- 详情没图的情况 -->
                    <div class="noPicture" v-if="$route.params.type === 'detail'">
                        <p>暂无图片</p>
                    </div>
                </Upload>
            </Col>
            <Col span="6" offset="2" v-if="noLicensePic">
                <span class="jg-name">营业执照照片</span>
                <div class="demo-upload-list" v-if="JSON.stringify(zzImgObj) != '{}'">
                    <template>
                        <img :src="fileUploadUrl +'/file/downFile/'+zzImgObj.fileIds">
                        <div class="demo-upload-list-cover">
                            <Icon type="ios-eye-outline" @click.native="visible = !visible,bigPic = `${fileUploadUrl}/file/downFile/${zzImgObj.fileIds}`"></Icon>
                            <Icon type="ios-trash-outline" v-if="$route.params.type != 'detail'" @click="remove('licensePic')"></Icon>
                        </div>
                    </template>
                </div>
                <Upload v-if="JSON.stringify(zzImgObj) == '{}'"
                    ref="upload"
                    :show-upload-list="false"
                    :on-success="handleSuccessZz"
                    :format="['jpg','jpeg','png','BMP','TIF','GIF','PJPEG','JFIF','PJP']"
                    :max-size="5120"
                    :on-format-error="handleFormatError"
                    :on-exceeded-size="handleMaxSize"
                    :disabled="$route.params.type == 'detail' ? true : false"
                    multiple
                    type="drag"
                    :action="uploadAction">
                    <div style="padding: 20px 0" v-if="$route.params.type != 'detail'">
                        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                        <p>营业执照照片</p>
                    </div>
                    <!-- 详情没图的情况 -->
                    <div class="noPicture" v-if="$route.params.type === 'detail'">
                        <p>暂无图片</p>
                    </div>
                </Upload>
            </Col>
        </Row>
        <!-- <div class="role-bottom">
            <Button type="primary">保存</Button>
            <Button style="margin-left:20px;" @click="cancel">取消</Button>
        </div> -->
        <Modal title="查看图片" v-model="visible" width="800" :footer-hide="true">
            <img :src="bigPic" style="width: 100%">
        </Modal>
    </div>
</template>
<script>
import closeTag from '../../../../mixins/closeTag'
export default {
    mixins:[closeTag],
    props:['obj'],
    data(){
        return{
            gsList:'',
            transfer:true,
            visible: false,
            zmImgObj: {},
            fmImgObj: {},
            zzImgObj: {},
            bigPic:'',
            uploadAction:process.env.VUE_APP_FILE_SERVER_URL+'file/uploadFile',
            fileUploadUrl:process.env.VUE_APP_FILE_SERVER_URL,
            visible:false,
            noPic:true,
            noFrontPic:true,
            noBackPic:true,
            noLicensePic:true
        }
    },
    watch:{
        obj(newVal,oldVal){
            if(newVal.cardFrontPic){
                this.zmImgObj.fileIds = newVal.cardFrontPic
            }
            if(newVal.cardBackPic){
                this.fmImgObj.fileIds = newVal.cardBackPic
            }
            if(newVal.licensePic){
                this.zzImgObj.fileIds = newVal.licensePic
            }
            if(!this.zmImgObj && !this.fmImgObj && !this.zzImgObj && this.$route.params.type === 'detail'){
                console.log('都美图')
                this.noPic = false
            }
        }
    },
    created(){
        
    },
    mounted(){
        this.getListByTypeCode()
    },
    methods:{
        //日期选择
        getDeadLine(e){
            console.log(e)
            this.obj.deadLine = e
        },
        // 工商类型
        getListByTypeCode(){
            this.$api.roleManagement.dictTypeCode('BUSINESS_TYPE').then(resp => {
                if(resp.code == 200){
                    this.gsList = resp.data
                }
            })
        },
        // 取消
        cancel(){
            let parmes = {
                name:this.$route.params.name
            }
            this.closetabParams('add-company',parmes)
        },
        //确认删除框
        remove(type) {
                this.$Modal.confirm({
                    title: '温馨提示',
                    closable: true,
                    content: '确认删除吗？',
                    width: 360,
                    onOk: () => {
                        type === 'frontPic' ? this.delFrontPic() : type === 'backPic' ? this.delBackPic() : this.delLicensePic()
                        
                    }
                })
        },
        // 正面上传成功回调
        handleSuccessZm (res) {
            this.zmImgObj = res;
            this.obj.cardFrontPic = this.zmImgObj.fileIds
        },
        
        //身份证正面删除
        delFrontPic(){
            this.zmImgObj = {}
            this.obj.cardFrontPic = ''
        },
        // 反面上传成功回调
        handleSuccessFm (res) {
            this.fmImgObj = res;
            this.obj.cardBackPic = this.fmImgObj.fileIds
        },
        //身份证反面删除
        delBackPic(){
            this.fmImgObj = {};
            this.obj.cardBackPic = ''
        },
        // 执照上传成功回调
        handleSuccessZz (res) {
            this.zzImgObj = res;
            this.obj.licensePic = this.zzImgObj.fileIds
        },
        //营业执照删除
        delLicensePic(){
            this.zzImgObj = {};
            this.obj.licensePic = ''
        },
        handleMaxSize (file) {
            this.$Message.warning('大小超过5M')
        },
        //格式错误提示
        handleFormatError (file) {
            this.$Message.warning('上传的文件格式不对')
        },
    }
}
</script>
<style scoped>
.jg-name{
    width: 100%;
    height: 40px;
    line-height: 40px;
    display: block;
}
.demo-upload-list{
    display: inline-block;
    width: 100%;
    height: 113px;
    text-align: center;
    line-height: 113px;
    border: 1px dashed #dcdee2;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    margin-right: 4px;
}
.demo-upload-list img{
    width: 100%;
    height: 100%;
}
.demo-upload-list-cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
}
.demo-upload-list:hover .demo-upload-list-cover{
    display: block;
}
.demo-upload-list-cover i{
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}
.noPicture{
    cursor: default;
    padding:20px 0;
}
.noBorder{
    border:0;
}
</style>